<template>
	<view class="main">
		<view class="title">
			<view class="title-name">
				<span class="return-his" @click="upOneLevel()">返回</span> <span
					style="font-size: 1.2rem;font-weight: bolder;">钱包提现</span>
			</view>
		</view>
		<view class="voucher-main">
			<view class="banner">
				<view class="baner-money">
					<view class="b-n-1">
						<span class="account-name">可提现余额/元</span>
						<span class="account-value">248.00</span>
					</view>
					<view class="b-n-2">
						<span class="wal-btn" @click="withdrawalRecord">提现记录</span>
					</view>
				</view>
				<view class="baner-income" style="color:#fff;font-weight: bold;">
					提现规则(税费 <span>8</span>%，手续费<span>8</span>% )
				</view>
			</view>
			<view class="withdrawal-data">
				<view class="data-itm">
					<span>提现银行卡</span>
					<input type="text" placeholder="请输入银行卡" :disabled="bankCardShow" v-model="bankCard"
						class="custom-input" /><span v-if="bankCardShow" class="information-data"
						@click="modify">修改</span><span v-else class="information-data" @click="confirm">确认</span>
				</view>
				<view class="data-itm">
					<span>提现微信号</span>
					<input type="text" placeholder="请输入微信号" :disabled="weixChange" v-model="weixaccount"
						class="custom-input" /><span v-if="weixChange" class="information-data"
						@click="weixmodify">修改</span><span v-else class="information-data"
						@click="weixconfirm">确认</span>
				</view>
				<view class="data-select">
					<span :class="{'yes-type':drawalType==1}" @click="yesTypeChan(1)">提现微信号</span>
					<span :class="{'yes-type':drawalType==0}" @click="yesTypeChan(0)">提现银行卡</span>
				</view>
				<view class="data-select" style="margin-top: 100rpx;width: 100%;">
					<span class="withdrawal-btn">提现</span>
				</view>
			</view>
		</view>
		<record-vue v-if="recordShow" @change="retRecord"></record-vue>
	</view>
</template>

<script>
	import recordVue from './record.vue';
	export default {
		components: {
			recordVue
		},
		data() {
			return {
				bankCard: '',
				bankCardShow: true,
				weixaccount: '',
				weixChange: true,
				drawalType: 1,
				recordShow: false,
			}
		},
		methods: {
			upOneLevel() {
				uni.navigateBack({
					delta: 1 // 返回层数，1表示上一页面
				});
			},
			modify() {
				this.bankCardShow = false
			},
			confirm() {
				this.bankCardShow = true
			},
			weixmodify() {
				this.weixChange = false
			},
			weixconfirm() {
				this.weixChange = true
			},
			yesTypeChan(val) {
				this.drawalType = val
			},
			retRecord() {
				this.recordShow = false
			},
			withdrawalRecord() {
				this.recordShow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100vh;
		// background-color: #f50;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.title {
		width: 100%;
		height: 6rem;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.title-name {
			margin-top: 2rem;
			width: 60%;
			height: 60rpx;
			// background-color: #f50;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.return-his {
				margin-left: 20rpx;
				font-size: 1rem;
			}
		}
	}

	.voucher-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		height: 300rpx;
		// background-color: #2896ff;
		background-image: url('http://static.qlzc.net/1895408479469047808/material/c0a49a36-0686-42a3-afe1-a81f41f7571e.png');
		background-size: 100% 100%;
		border-radius: 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 10rpx;
		overflow: hidden;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.baner-money {
		width: 100%;
		height: 160rpx;
		// background-color: #f50;
		display: flex;
		justify-content: space-between;
		align-items: center;


		.b-n-1,
		.b-n-2 {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			// align-items: center;
			flex-direction: column;
			color: #fff;
			font-weight: bolder;
		}
	}


	.b-n-2 {
		align-items: flex-end;
	}

	.account-value {
		font-size: 1.8rem;
		margin-top: 10rpx;
	}

	.wal-btn {
		margin-top: 3vh;
		width: 130rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// opacity: 0;
	}

	.baner-income {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		display: flex;
	}

	.withdrawal-data {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.data-itm {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		// background-color: #f50;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.custom-input {
		flex: 1;
		margin: 0 20rpx;
	}

	.information-data {
		color: rgba(194, 147, 118, 1);
		font-weight: bolder;
	}

	.data-select {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		justify-content: space-between;

		span {
			color: rgba(32, 97, 255, 1);
			font-weight: bolder;
			width: 120px;
			height: 80rpx;
			border: #888 1px solid;
			border-radius: 5rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.yes-type {
		background-color: #2896ff;
		color: #fff !important;
	}

	.withdrawal-btn {
		flex: 1;
		height: 80rpx;
		background-color: #2896ff;
		color: #fff !important;
	}
</style>